<template>
  <view id="home">
    <view class="home">
      <!-- 搜索框 -->
      <view class="search">
        <uv-search
          @click="Search()"
          placeholder="请输入您的搜索的内容"
          shape="round"
          :showAction="false"
          :disabled="true"
        ></uv-search>
      </view>
      <!-- 轮播图 -->
      <uv-swiper
        :list="swiper"
        indicator
        indicatorMode="line"
        circular
        imgMode="aspectFit"
      ></uv-swiper>
      <!-- 九宫格 -->
      <view class="gid">
        <uv-grid :col="5">
          <!-- @click="gid" -->
          <uv-grid-item
            v-for="(item, index) in baseList"
            :key="index"
            @click="fenlei(item.url)"
          >
            <uv-icon
              :customStyle="{ paddingTop: 40 + 'rpx' }"
              :name="item.name"
              :size="45"
            ></uv-icon>
            <text class="grid-text">{{ item.title }}</text>
          </uv-grid-item>
        </uv-grid>
      </view>
      <!-- 官方公告 -->
      <view class="ment">
        <view class="ment-left">官方公告</view>
        <view class="ment-right">
          左左街声明，快来发布买家秀活动
          <view class="ment-img">
            <image src="/static/右箭头.png" alt=""></image>
          </view>
        </view>
      </view>
      <!-- 抢购区 -->
      <view class="snapped">
        <view class="snapped-left">
          <view class="snapped-left-text">
            <p style="font-size: 20px; color: #d48e37">抢购区</p>
            <p style="font-size: 16px; color: #d48f3a">抢单更优惠</p>
            <button>GO ></button>
          </view>
        </view>
        <view class="snapped-right">
          <view class="snapped-right-text" @click="hb()">
            <p style="font-size: 20px; color: #d95250">红包区</p>
            <p style="font-size: 16px; color: #dc5c5a">更多商品免费领</p>
            <button>GO ></button>
          </view>
        </view>
      </view>
      <!-- 限时秒杀 -->
      <view class="spikes">
        <view class="spikes-content">
          <view class="spikes-top">
            <view class="spikes-top1">
              <view style="font-size: 18px; color: #fff; width: 120%"
                >限时秒杀</view
              >
              <view class="spikes-top2">
                <image src="/static/直播中.png" alt=""></image>
                <view style="color: #fb0d48; font-weight: bold">直播中</view>
              </view>
            </view>
            <view class="spikes-top3" style="color: #fed1dc" @click="lottery"
              >查看更多>
            </view>
          </view>
          <view class="spikes-center">
            <view
              class="spikes-center1"
              v-for="(item, index) in spikes"
              :key="index"
            >
              <view class="spikes-img"
                ><image :src="item.img" alt=""></image
              ></view>
              <view class="spikes-text">{{ item.name }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view id="recom">
      <view class="recom">
        <view class="recom-top">热卖推荐</view>
        <view class="recom-conter">
          <view
            class="recom-conter1"
            v-for="(item, index) in recom"
            :key="index"
          >
            <view class="recom-img"
              ><image :src="item.img" alt=""></image
            ></view>
            <view class="recom-content">
              <view class="recom-text"
                ><text>{{ item.name }}</text
                >{{ item.text }}</view
              >
              <view class="recom-red">
                <view class="recom-red1">{{ item.text1 }}</view>
                <view class="recom-red2">￥{{ item.text2 }}</view>
              </view>
              <view class="recom-price"
                >￥{{ item.pirce }}<text>.00</text></view
              >
              <view class="recom-price1">
                <view>￥{{ item.pirce1 }} <text>.00</text></view>
                <view>月销{{ item.num }}</view>
              </view>
              <view class="recom-bottom">
                <image :src="item.img1" alt=""></image>
                <view class="p">{{ item.text3 }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Search from "../search/search.vue";

export default {
  data() {
    return {
      // 轮播图
      swiper: [
        "https://cdn.uviewui.com/uview/swiper/swiper3.png",
        "https://cdn.uviewui.com/uview/swiper/swiper2.png",
        "https://cdn.uviewui.com/uview/swiper/swiper1.png",
      ],
      // 九宫格
      baseList: [
        { name: "/static/商城.png", title: "商城自营" },
        { name: "/static/加油.png", title: "加油" },
        { name: "/static/酒店.png", title: "酒店" },
        { name: "/static/打车信息.png", title: "打车出行" },
        { name: "/static/车票.png", title: "车票" },
        { name: "/static/充值.png", title: "充值中心" },
        { name: "/static/保养.png", title: "养车" },
        { name: "/static/银行.png", title: "银行特惠" },
        {
          name: "/static/交易流水.png",
          title: "二手交易",
          url: "/pages/Secondgoods/Secondgoods",
        },
        {
          name: "/static/分类.png",
          title: "全部分类",
          url: "/pages/fenlei/fenlei",
        },
      ],
      //限时秒杀
      spikes: [
        { img: "/static/商品名称.png", name: "商品名称" },
        { img: "/static/商品名称1.png", name: "商品名称" },
        { img: "/static/商品名称2.png", name: "商品名称" },
      ],
      // 热卖推荐
      recom: [
        {
          img: "/static/商品名称.png",
          name: "自营",
          text: "裤子男士休闲长裤加绒加厚束脚裤潮年.…",
          text1: "送红包",
          text2: 50,
          pirce: 120,
          pirce1: 180,
          num: 180,
          img1: "/static/邀.png",
          text3: "邀请新人参与抢购再优惠15%",
        },
        {
          img: "/static/商品名称2.png",
          name: "自营",
          text: "裤子男士休闲长裤加绒加厚束脚裤潮年.…",
          text1: "送红包",
          text2: 50,
          pirce: 120,
          pirce1: 180,
          num: 180,
          img1: "/static/邀.png",
          text3: "邀请新人参与抢购再优惠15%",
        },
        {
          img: "/static/商品名称.png",
          name: "自营",
          text: "裤子男士休闲长裤加绒加厚束脚裤潮年.…",
          text1: "送红包",
          text2: 50,
          pirce: 120,
          pirce1: 180,
          num: 180,
          img1: "/static/邀.png",
          text3: "邀请新人参与抢购再优惠15%",
        },
        {
          img: "/static/商品名称.png",
          name: "自营",
          text: "裤子男士休闲长裤加绒加厚束脚裤潮年.…",
          text1: "送红包",
          text2: 50,
          pirce: 120,
          pirce1: 180,
          num: 180,
          img1: "/static/邀.png",
          text3: "邀请新人参与抢购再优惠15%",
        },
        {
          img: "/static/商品名称.png",
          name: "自营",
          text: "裤子男士休闲长裤加绒加厚束脚裤潮年.…",
          text1: "送红包",
          text2: 50,
          pirce: 120,
          pirce1: 180,
          num: 180,
          img1: "/static/邀.png",
          text3: "邀请新人参与抢购再优惠15%",
        },
        {
          img: "/static/商品名称1.png",
          name: "自营",
          text: "裤子男士休闲长裤加绒加厚束脚裤潮年.…",
          text1: "送红包",
          text2: 50,
          pirce: 120,
          pirce1: 180,
          num: 180,
          img1: "/static/邀.png",
          text3: "邀请新人参与抢购再优惠15%",
        },
      ],
    };
  },
  methods: {
    // 搜索框
    Search() {
      uni.navigateTo({
        url: "/pages/search/search",
      });
    },
    // 九宫格
    // gid(name) {
    //   uni.showToast({
    //     icon: "none",
    //     title: `点击了第${name + 1}个`,
    //   });
    // },
    hb() {
      uni.navigateTo({
        url: "/pages/hongbaozhuanqu/hongbaozhuanqu",
      });
    },
    lottery() {
      uni.navigateTo({
        url: "/pages/lottery/lottery",
      });
    },
    fenlei(e) {
      uni.navigateTo({
        url: e,
      });
      // console.log(e);
    },
  },
};
// onLoad() {},
// methods: {},
</script>

<style lang="scss">
#home {
  width: 100vw;
  height: 100vh;
  background-color: linear-gradient(#fff 30%, #f5f5f5 70%);
}

.home {
  width: 90%;
  margin: auto;
}

/* 搜索框 */
.search {
  margin-top: 40rpx;
  margin-bottom: 20rpx;
}

/* 九宫格 */
.grid-text {
  font-size: 14px;
}

/* 官方公告 */
.ment {
  width: 100%;
  height: 90rpx;
  display: flex;
  margin: 30rpx 0px;
  background-color: #f5f5f5;
  border-radius: 10rpx;

  .ment-left {
    width: 34%;
    text-align: center;
    font-weight: bold;
    font-size: 1.1rem;
    color: #fc4728;
    line-height: 40px;
    background-color: #fff;
    height: 80rpx;
    margin-top: 5rpx;
    border-radius: 10rpx;
  }

  .ment-right {
    font-size: 0.8rem;
    color: #adadad;
    line-height: 90rpx;
    padding: 0px 10rpx;
    display: flex;
    justify-content: space-between;

    .ment-img {
      width: 10%;

      image {
        width: 80%;
        height: 40rpx;
        margin-top: 23rpx;
      }
    }
  }
}

/* 抢购区 */
.snapped {
  width: 100%;
  display: flex;
  justify-content: space-between;

  .snapped-left {
    width: 49%;
    background-color: #ffc856;
    border-radius: 10rpx;

    .snapped-left-text {
      padding: 30rpx 20rpx;
      line-height: 55rpx;

      button {
        width: 30%;
        height: 40rpx;
        font-size: 13px;
        line-height: 40rpx;
        color: #fff;
        background-color: #d48f39;
        margin-top: 10rpx;
      }
    }
  }

  // 红包区
  .snapped-right {
    width: 49%;
    background-color: #ffcfc8;
    border-radius: 10rpx;

    .snapped-right-text {
      padding: 30rpx 20rpx;
      line-height: 55rpx;

      button {
        width: 30%;
        height: 40rpx;
        font-size: 13px;
        line-height: 40rpx;
        color: #fff;
        background-color: #d9504e;
        margin-top: 10rpx;
      }
    }
  }
}

/* 限时秒杀 */
.spikes {
  width: 100%;
  background-color: #fb0d48;
  margin-top: 40rpx;
  border-radius: 10px;

  .spikes-content {
    width: 94%;
    margin: auto;

    .spikes-top {
      display: flex;
      justify-content: space-between;
      height: 100rpx;
      padding: 20rpx 0px;

      .spikes-top1 {
        display: flex;
      }

      .spikes-top2 {
        background-color: #fff;
        display: flex;
        width: 80%;
        margin-left: 20rpx;
        border-radius: 24rpx;
        height: 50rpx;
        line-height: 50rpx;

        image {
          width: 1%;
        }
      }
    }

    .spikes-center {
      display: flex;
      justify-content: space-between;

      .spikes-center1 {
        width: 31%;
        margin-bottom: 30rpx;
        // border: 1px solid red;

        .spikes-img {
          width: 100%;
          image {
            width: 100%;
            height: 240rpx;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
          }
        }

        .spikes-text {
          width: 90%;
          background-color: #fff;
          height: 60rpx;
          line-height: 60rpx;
          padding-left: 20rpx;
          margin-top: -10rpx;
          font-size: 14px;
          border-bottom-left-radius: 8px;
          border-bottom-right-radius: 8px;
        }
      }
    }
  }
}

/* 热卖推荐 */
#recom {
  width: 100%;
  background-color: #f5f5f5;

  .recom {
    width: 90%;
    margin: auto;

    .recom-top {
      width: 100%;
      text-align: center;
      padding: 40rpx 0px;
      font-weight: bold;
      font-size: 18px;
    }

    .recom-conter {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .recom-conter1 {
        width: 49%;
        background-color: #fff;
        border-radius: 10px;
        margin: 14rpx 0px;

        .recom-img {
          width: 100%;

          image {
            width: 100%;
            height: 12rem;
          }
        }

        .recom-content {
          width: 95%;
          margin: auto;

          .recom-text {
            font-size: 15px;
            // letter-spacing: 1rpx;

            text {
              background-color: #fc4424;
              padding: 4rpx 8rpx;
              margin-right: 6rpx;
              font-size: 13px;
              color: #fff;
              border-radius: 8rpx;
            }
          }

          .recom-red {
            display: flex;
            font-size: 13px;
            margin: 14rpx 0px;
            text-align: center;
            height: 40rpx;
            line-height: 40rpx;

            .recom-red1 {
              border: 1px solid #fc4424;
              width: 30%;
              color: #fc4424;
              border-radius: 6rpx;
              font-size: 12px;
            }

            .recom-red2 {
              width: 20%;
              color: #fff;
              background-color: #fc4424;
              border-radius: 6rpx;
              margin-left: -4rpx;
            }
          }

          .recom-price {
            font-size: 18px;
            color: #fc4424;
            margin: 10rpx 0px;
            text {
              font-size: 14px;
            }
          }
          .recom-price1 {
            display: flex;
            justify-content: space-between;
            margin: 10rpx 0px;
            color: #9c9c9c;
            font-size: 14px;
            view:nth-child(1) {
              text-decoration: line-through;
            }
          }
          .recom-bottom {
            font-size: 10px;
            margin: 20rpx 0px;
            display: flex;
            image {
              width: 10%;
              height: 1rem;
            }
            .p {
              padding-left: 10rpx;
              color: #fc6348;
            }
          }
        }
      }
    }
  }
}
</style>
